<template>
    <div>
        <div v-for="items,indexs in list" :key="indexs">
            <div class="height-box"></div>
            <div class="list-bg">
                <div v-for="item in items" :key="item.type" class="list-box">
                    <div v-if="item.type == 1" class="box-img">
                        <img :src="item.img" >
                    </div>
                    <div v-if="item.type == 2" class="box-title">
                        <p>{{item.title}}</p>
                        <span>{{item.text}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    props:['list'],
    mounted() {
        
    },
    methods: {
        
    },
}
</script>

<style scoped lang="less">
.list-bg{
    width: 100%;
    height: 70vh;
    background-color: rgb(40, 40, 40);
    display: flex;
    justify-content: center;
    align-items: center;
}
.height-box{
    width: 100%;
    height: 10vh;
    background-color: rgb(40, 40, 40);

}
.list-box{
    width: 50%;
    height: 100%;
}
.box-img{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: 70%;
        object-fit: cover;
    }
}
.box-title{
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 0 10%;
    p{
        font-size: 70px;
        font-family: "JGFONT";
        margin-bottom: 50px;
    }
    span{
        font-size: 30px;
        
    }
}
</style>